<script setup lang="ts">
import { onBeforeMount, reactive, ref } from 'vue';

import { ElLocation, ElpMessage } from '@vben/icons';

import { StorageManager } from '@vben-core/shared/cache';

import { ElAvatar, ElButton, ElIcon, ElMessage } from 'element-plus';

import { userApi } from '#/api';
import { useUserStore } from '#/store';

import { EditProfile, UpdateAvatar } from './components';

const storageManager = new StorageManager({
  prefix: '',
  storageType: 'sessionStorage',
});

const userStore = useUserStore();
const profileLoading = ref(true);
const showInfo = reactive({
  data: {
    username: '',
    institution: '',
    email: '',
  },
});

const dialogUpdate = ref(false);
const dialogVisibleCropper = ref(false);
const realAvatar = ref(storageManager.getItem('avatar')) || null;
const btnClick = () => {
  dialogVisibleCropper.value = true;
};
// 编辑头像
const confirm = (data: any) => {
  const avatarData = new FormData();
  avatarData.append('userId', storageManager.getItem('userId') as string);
  avatarData.append('avatar', data);
  userApi
    .updateUserAvatar(avatarData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    })
    .then((response: any) => {
      if (response) {
        const avatar = response;
        storageManager.removeItem('avatar');
        storageManager.setItem('avatar', avatar);
        realAvatar.value = `${storageManager.getItem('avatar')}?version=${Date.now()}`;
        userStore.loginUser.avatar = realAvatar.value as string;
        ElMessage({
          type: 'success',
          message: '更新成功',
        });
      }
      dialogVisibleCropper.value = false;
    });
};

const getUserInfo = () => {
  userApi
    .getUserInfo(storageManager.getItem('userId') as string)
    .then((response: any) => {
      if (response) {
        showInfo.data.username = response.userName;
        showInfo.data.email = response.email;
        showInfo.data.institution = response.institution;
      }
      setTimeout(() => {
        profileLoading.value = false;
      }, 300);
    });
};

onBeforeMount(() => {
  getUserInfo();
});
// mock的详情数据
const cardData: {
  bgColor: string;
  description: string;
  hoverColor: string;
  textColor: string;
  title: string;
  value: string;
}[] = [
  {
    bgColor: 'bg-sky-600',
    textColor: 'text-sky-500',
    hoverColor: 'hover:bg-sky-500',
    description: '场景数量',
    title: '个人场景',
    value: '20个',
  },
  {
    bgColor: 'bg-green-600',
    textColor: 'text-green-500',
    hoverColor: 'hover:bg-green-500',
    description: '资源数量',
    title: '个人资源',
    value: '50个',
  },
  {
    bgColor: 'bg-orange-600',
    textColor: 'text-orange-500',
    hoverColor: 'hover:bg-orange-500',
    description: '服务数量',
    title: '矢量服务',
    value: '10个',
  },
  {
    bgColor: 'bg-purple-600',
    textColor: 'text-purple-500',
    hoverColor: 'hover:bg-purple-500',
    description: '服务数量',
    title: '栅格服务',
    value: '15个',
  },
  {
    bgColor: 'bg-teal-600',
    textColor: 'text-teal-500',
    hoverColor: 'hover:bg-teal-500',
    description: '工具数量',
    title: '工具',
    value: '30个',
  },
  {
    bgColor: 'bg-yellow-600',
    textColor: 'text-yellow-500',
    hoverColor: 'hover:bg-yellow-500',
    description: '模型数量',
    title: '模型',
    value: '30个',
  },
];
</script>

<template>
  <div
    class="flex h-full w-full flex-col overflow-auto scroll-auto lg:flex-row xl:flex-row"
  >
    <!-- 个人信息 -->
    <div
      class="flex min-h-[70vh] w-full items-center justify-center lg:w-1/2 xl:w-1/3"
    >
      <div
        class="profile-card group relative z-[100] flex h-2/3 w-2/3 shrink-0 cursor-pointer snap-start flex-col items-center justify-center gap-3 overflow-hidden rounded-md bg-white shadow-xl transition-all duration-300 dark:bg-slate-900"
      >
        <!-- 头像部分 -->
        <div
          class="avatar flex w-full flex-col items-center justify-center gap-1 pt-5"
        >
          <div
            class="img_container relative flex w-full items-center justify-center before:absolute before:bottom-4 before:h-[4px] before:w-full before:bg-[#58b0e0] before:transition-all before:duration-300 after:absolute after:top-4 after:h-[4px] after:w-full after:bg-[#58b0e0] after:transition-all after:duration-300 before:group-hover:size-[1%] before:group-hover:transition-all before:group-hover:delay-0 before:group-hover:duration-300 after:group-hover:size-[1%] after:group-hover:transition-all after:group-hover:delay-0 after:group-hover:duration-300"
          >
            <ElAvatar
              v-if="realAvatar"
              @click="btnClick"
              :src="realAvatar"
              :size="150"
              class="z-1000 border-4 border-white shadow-xl transition-all duration-300 group-hover:border-8 group-hover:transition-all group-hover:duration-300"
            />
            <ElAvatar
              v-else
              @click="btnClick"
              :size="150"
              class="z-1000 flex items-center justify-center border-4 border-white shadow-xl transition-all duration-300 group-hover:border-8 group-hover:transition-all group-hover:duration-300"
            >
              <span class="text-[10vh] text-gray-700 dark:text-gray-200">
                {{ showInfo.data.username[0] }}
              </span>
            </ElAvatar>

            <!-- 头像底部装饰块 -->
            <div
              class="absolute z-10 size-[60%] w-full bg-[#58b0e0] transition-all delay-700 duration-300 group-hover:size-[1%] group-hover:transition-all group-hover:delay-0 group-hover:duration-300"
            ></div>
          </div>
        </div>

        <!-- 用户名 -->
        <div class="headings *:text-center *:leading-4">
          <p
            class="pt-5 font-serif text-xl font-semibold text-[#434955] dark:text-gray-200"
          >
            {{ showInfo.data.username }}
          </p>
        </div>

        <!-- 个人信息 -->
        <div class="flex w-full flex-col items-center justify-center p-4">
          <ul
            class="flex flex-col items-start gap-2 pb-3 text-[#434955] *:inline-flex *:items-center *:justify-center *:gap-2 *:border-b-[1.5px] *:border-dotted *:border-b-stone-700 *:text-sm *:font-semibold has-[:last]:border-b-0 dark:text-white"
          >
            <li>
              <ElIcon><ElpMessage /></ElIcon>
              <p>{{ showInfo.data.email }}</p>
            </li>
            <li>
              <ElIcon><ElLocation /></ElIcon>
              <p>{{ showInfo.data.institution }}</p>
            </li>
          </ul>
          <ElButton
            class="mt-4 flex items-center justify-center"
            type="primary"
            plain
            @click="dialogUpdate = true"
          >
            {{ $t('page.profile.editProfile') }}
          </ElButton>
        </div>
      </div>
    </div>

    <!-- 详细信息 -->
    <div
      class="flex h-full w-full flex-col justify-center gap-6 bg-white p-8 lg:w-1/2 xl:w-2/3 dark:bg-gray-950"
    >
      <span class="text-xl font-semibold italic">我的资源</span>
      <div
        class="grid grid-cols-1 justify-center gap-8 lg:grid-cols-2 xl:grid-cols-3"
      >
        <div
          v-for="(card, index) in cardData"
          :key="index"
          class="relative flex h-64 flex-col items-center justify-center gap-2 overflow-hidden rounded-2xl text-gray-50 shadow-lg"
          :class="card.bgColor"
        >
          <div class="flex flex-col items-center">
            <p class="text-xl font-extrabold">{{ card.title }}</p>
            <p
              class="relative mt-1 inline-block text-xs before:absolute before:top-1/2 before:-ml-14 before:h-0.5 before:w-12 before:bg-gray-200 before:content-[''] after:absolute after:top-1/2 after:ml-2 after:h-0.5 after:w-12 after:bg-gray-200 after:content-['']"
            >
              {{ card.description }}
            </p>
          </div>
          <span
            class="-mt-1 mb-5 -skew-x-12 -skew-y-12 text-7xl font-extrabold"
          >
            {{ card.value }}
          </span>
          <button
            class="z-10 bg-gray-50 px-4 py-2 font-bold duration-500 hover:text-gray-50"
            :class="`${card.textColor} ${card.hoverColor}`"
          >
            查看
          </button>
        </div>
      </div>
    </div>

    <!-- 编辑个人信息 -->
    <EditProfile
      v-model:visible="dialogUpdate"
      @refresh-profile="getUserInfo"
    />
    <!-- 更新头像 -->
    <UpdateAvatar
      v-model:dialog-visible-cropper="dialogVisibleCropper"
      @confirm="confirm"
    />
  </div>
</template>
